<template>
<view class="prize-list">
	<block v-for="(item,index) in list" :key="item.prizeId">
		<view class="prize-item" style="background-color: #2e2c83;" @tap="toDrawDetails(item.prizeId)">
			<image :src="item.prizeUrl" mode="widthFix" class="prize-img"></image>
			<view class="prize-item_bottom mc-f15">
				<view class="color-white">奖品：{{item.prizeName}}</view>
				<view class="margin-top20">
					<text class="color-white">数量：</text>
					<text style="color: #ffeb00;">{{item.prizeAmount}}份</text>
				</view>
				<view class="mc-f12 margin-top20" style="color: #d6d6d6;">{{item.lotteryTime}} 自动开奖</view>
				<form @submit="setFormId" report-submit="true">
					<button form-type="submit" @tap.stop="stop" open-type="share" :data-url="item.shareImgUrl" :data-name="item.prizeName" :data-id="item.prizeId" type="primary" class="border-radius margin-top30"
					 style="background-color: #1ac97c;" v-if="item.isPartake">等待开奖
						邀请好友增加中奖率</button> 
					<button form-type="submit" type="primary" class="border-radius margin-top30" style="background-color: #f06338;"
					 v-else>去看看</button>
				 </form>
			</view>
		</view>
		<view class="prize-item bg-color-white padding-top20 padding-bottom20" v-if="index%2==1">
			<card-ad></card-ad>
		</view>
	</block>
	<view class="prize-item bg-color-white padding-top20 padding-bottom20" v-if="list.length<2">
		<card-ad></card-ad>
	</view>
</view>
</template>

<script>
/**
 *  简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用
 *  比如加入image， iconSize可控等
 */
export default {
  name: 'draw-liet-item',
  data() {
    return {};
  },
  props: {
    list: {
      type: Array,
      default: []
    },
  },
  methods: {
	toDrawDetails(prizeId) {
		console.log('prizeId', prizeId)
		this.$util.debounce(() => {
			uni.navigateTo({
				url: '/pages/draw/details/details?prizeId=' + prizeId
			})
		})()
	},
	stop() {},
	// 保存二维码
	setFormId(e) {
		this.$store.dispatch('common/formIdListUp', { e:e, isSave:true })
	},
  }
};
</script>

<style lang='scss' scoped>
	.prize-item {
		position: relative;
		width: 690rpx;
		margin: 40rpx auto;
		z-index: 9;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.prize-img {
		display: block;
		width: 100%;
	}
	
	.prize-item_bottom {
		padding: 30rpx;
	}
</style>
